<template>
  <div id="makeindex" class="make">
      <div class="title">
            <h4>预约规则</h4>
      </div>
      <div class="main">
        <!-- 日期编辑 -->
        <div class="dateMakeOne dateMake">
            <el-form ref="form"  label-width="120px">
            <el-form-item label="预约日期：" style="width:100%;">
              <el-select v-model="orderWeekStart" size="small" @change="getStartWeek($event)"  placeholder="请选择" style="width:350px;">
                <el-option
                  v-for="item in options"
                  :key="item"
                  :value="item"
                  >
                </el-option>
              </el-select>
              &nbsp; &nbsp;至 &nbsp; &nbsp;
              <el-select v-model="orderWeekEnd" size="small" @change="getEndWeek($event)" placeholder="请选择" style="width:350px;">
                <el-option
                  v-for="item in optionsTwo"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item >
              <el-form-item label=""  class="dateMakeSnake" style="width:100%;">  
                  <el-button class="dateOne"  style="width:350px;" icon="el-icon-date" size="small">非预约日期设置</el-button>
                  <el-tooltip placement="top">
              <div style="width:500px;" slot="content">设置预约日期后，可设置非预约时间段，例如：已设置每周一至每周五可预约，则点击非预约时间段设置，
                        可选择每周一/周二/周三/周四/周五的非预约时间段（如：每周一上午9：00-11：00不可预约）注：非预约时间段设置后
                        ，系统将以你所设置的非预约时间段 为主，与可预约的时间段设置不会发生冲突</div>
              <el-button class="imgSlot el-icon-info" size="small"></el-button>
            </el-tooltip>
                  <el-date-picker
                  class="chooseDate"
                  size='small'
                  ref="datesRef"
                  type="dates"
                  v-model="dateArr"
                  :editable = "false"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择一个或多个日期">
                </el-date-picker>
              </el-form-item>
          </el-form>
        </div>
        <!-- 预约时间编辑 -->
        <div class="timeSlotMake">
           <el-form ref="form"  label-width="120px">
             <el-form-item label="预约时间：">
                  <div class="listItem" v-for="(item,i) in arrIndexs" :key="i">
                    <div class="itemRow">
                       <el-time-select
                        :clearable='false'
                        @change="getStartTime($event)"
                          v-model="item[0]" size="small" placeholder="请选择" style="width:350px;"
                          :picker-options="{
                            start: arrIndexs[i-1] ? arrIndexs[i-1][1]: '00:00' || '00:00',
                            step: '00:30',
                            end: item[1]||'24:00'
                          }">
                        </el-time-select>
                       &nbsp;&nbsp;&nbsp;至 &nbsp; &nbsp;
                       <el-time-select
                        :clearable='false'
                        :disabled="!Boolean(item[0])"
                        @change="getEndTime($event)"
                          v-model="item[1]" size="small" placeholder="请选择" style="width:350px;"
                          :picker-options="{
                            start: item[0]||'00:00',
                            step: '00:30',
                            end: arrIndexs[i+1] ? arrIndexs[i+1][0]: '24:00' || '24:00'
                          }">
                        </el-time-select>
                    </div>
                    <span style="margin-right:45px;">
                    <b>该时间段最高预约</b>
                    <el-input-number 
                      v-model="item[2]" 
                      size="small"
                      controls-position="right" 
                      @change="handleChange" 
                      :min="1" :max="1000"
                      style="width:120px;"
                      >
                    </el-input-number>
                    <b class="personRight">人</b >
                    </span>
                    <span>
                    <b>该时间段非预约用户可取号</b>
                    <el-input-number 
                      size="small"
                      style="width:120px;"
                      v-model="item[3]" 
                      controls-position="right" 
                      @change="handleChange" 
                      :min="1" :max="1000">
                    </el-input-number>
                    <b style="margin-left:10px;">个</b> 
                    </span>
                    <i class="el-icon-delete" v-if="arrIndexs.length > 1" @click="deleteList(i)" style="color:#CE4959;font-size:20px;margin-left:10px;"></i>
                  </div>
                  <el-button icon="el-icon-plus" :disabled=" fullTime" size="small" :plain="true" style="border:1px dotted #999;width:750px;margin-top:10px;" @click="addMore()">添加更多</el-button>
             </el-form-item>
           </el-form>
        </div>
        
        <!-- 非预约时间段 -->
        <el-form ref="form" label-width="120px" class="orderBeforeNum datatimes" style="100%;overflow:hidden;">
          <el-form-item label="非预约时间段:">
            <div class="dateMakeSnake">
   
              <div class="timeSlot" v-if="visible2">
                <div class="timeSlotMain">
                  <ul>
                    <li v-for="(week,x) in arrIndex" :key="x" style="overflow:hidden;">
                      <span
                        class="makeDateLeft"
                        style="width:100px;float:left;text-align:center;margin-top:12px;"
                      >{{textArr[x]}}</span>
                      <div class="makeDateRight" style="width:300px;display:inline-block;">
                        <div
                          class="makeDateRightList"
                          v-for="(day,i) in week"
                          :key="i"
                          style="margin-top:10px;"
                        >
                          <el-select
                            v-model="week[i]"
                            placeholder="请选择"
                            style="width:250px;text-align:center;"
                            @change="getNotTime($event,x)"
                          >
                            <el-option
                              v-for="(item,y) in notOrderTimeList[x]"
                              :key="y" 
                              :label="item.label"
                              :disabled="item.disabled"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                          <i
                            class="el-icon-delete"
                            @click="deleteListTime(x,i,week[i])"
                            style="color:#CE4959;font-size:20px;margin-left:10px;cursor:pointer;"
                          ></i>
                        </div>
                        <el-button
                          icon="el-icon-plus"
                          size="small"
                          :disabled="fullTimeDate[x]"
                          style="border:1px dotted #999;width:250px;margin-top:10px;"
                          @click="addDateSlot(x)"
                        >添加更多</el-button>
                      </div>
                    </li>
                  </ul>
                   <div style="text-align: right; margin: 10px;">
                    <el-button
                      type="primary"
                      size="small"
                      style="width:150px;"
                      @click="getConfirm(' ')"
                    >保存</el-button>
                    <el-button
                      size="small"
                      type="text"
                      style="width:150px;border:1px solid #999;margin-right:50px;"
                      @click="getRemove()"
                    >取消</el-button>
                  </div>
                </div>
               
              </div>
              <el-button slot="reference" @click="notTimeFn()" style="width:350px;" size="small">非预约时段设置</el-button>
              <el-tooltip placement="bottom">
              <div style="width:500px;" slot="content">设置预约日期后，可设置非预约时间段，例如：已设置每周一至每周五可预约，则点击非预约时间段设置，
                        可选择每周一/周二/周三/周四/周五的非预约时间段（如：每周一上午9：00-11：00不可预约）注：非预约时间段设置后
                        ，系统将以你所设置的非预约时间段 为主，与可预约的时间段设置不会发生冲突</div>
              <el-button class="imgSlot el-icon-info" style="position:relative;left:-4px;" size="small"></el-button>
            </el-tooltip>
            </div>
          </el-form-item>
        </el-form>

        <!-- 提前预约  -->
        <div class="orderBefore" style="100%;">
          
           <el-form ref="form"  label-width="120px">
             <el-form-item label="提前预约：">
                <el-select v-model="orderNumberDay[0]" size="small" @change="getOrderBefore($event)" placeholder="请选择" style="width:350px;">
                  <el-option
                    v-for="item in orderNumberOne"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                &nbsp; &nbsp;至 &nbsp; &nbsp;
                <el-select v-model="orderNumberDay[1]" size="small"  @change="getOrderBeforeTwo($event)" placeholder="请选择" style="width:350px;">
                  <el-option
                    v-for="item in orderNumberTwo"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>

                 <el-tooltip placement="top">
              <div style="width:500px;" slot="content">例：当最低可提前预约天数为1天&最高可提前预约天数为4天，则在2018/09/03当天可预约的最近日期为2018/09/04，可预约的最远日期为2018/09/07例：当最低可提前预约天数为1天&最高可提前预约天数为4天，则在2018/09/03当天可预约的最近日期为2018/09/04，可预约的最远日期为2018/09/07</div>
              <el-button class="imgSlot el-icon-info" size="small"></el-button>
            </el-tooltip>
                <div class="tips">则：可预约日期为{{ canOederStart }} ~ {{ canOederEnd }}</div>
             </el-form-item>
          </el-form>
        </div>       
        
        <!-- 每天取号次数 -->
        <div class="orderBeforeNum" style="100%;">
            <el-form ref="form"  label-width="120px" >
             <el-form-item label="用户预约： ">
                <el-select v-model="value1" size="small" placeholder="每人每天可预约次数" style="width:750px;">
                  <el-option
                    v-for="item in orderBeforeNum"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
        </div>

        <!-- 取号设置 -->
        <div class="orderBeforeNum">
            <el-form ref="form"  label-width="120px">
             <el-form-item label="取号设置：">
                <el-radio v-model="radio" label="true">当天可取当天所有号码</el-radio>
                <el-radio v-model="radio" label="false">上午只取当天上午号码，下午只取下午号码</el-radio>
              </el-form-item>
            </el-form>
        </div>

        <!-- 爽约机制 -->
        <div class="orderBeforeNum">
            <el-form ref="form"  label-width="120px">
             <el-form-item label="爽约机制：">
                <el-radio v-model="radio1" label="true">是，采用爽约机制</el-radio>
                <el-radio v-model="radio1" label="false">否，不采用爽约机制</el-radio>
              </el-form-item>
                <el-form-item  v-if="radio1 == 'true'" label="" style="width:100%;">
              <div >
                若爽约次数达到&nbsp;
                 <el-input-number v-model="breakNum" size="small" controls-position="right" :min="1" :max="1000"></el-input-number>
                次&nbsp;则&nbsp;
                 <el-input-number v-model="breakDayNum" size="small" controls-position="right" :min="1" :max="1000"></el-input-number>
               天 &nbsp;内不可再次预约
              </div>
               </el-form-item>
            </el-form>
            
        </div>

        <div class="orderBeforeNum" style="margin-top:30px;">
          <el-form ref="form"  label-width="100px">
              <el-form-item label="">
              <el-button type="primary" :plain="true" @click="Submission()"  style="width:120px;">提交</el-button>
              <el-button  style="width:120px;" @click="yuLan()" plain>预览</el-button>
            </el-form-item>
            </el-form>
        </div>

        <!-- 首次进入预览 -->
        <el-dialog
          title="预约规则预览"
          :visible.sync="dialogVisibleMakeDate"
          width="50%" class="preview">
            <p><strong>预约日期：</strong> {{orderWeekStart}}至{{orderWeekEnd}}</p>
            <div>
              <strong>非预约日期：</strong>
              <p v-if="dateArr[0]"><span  v-for="(item,i) in dateArr"   :key="i">{{item}},</span></p>
              <span v-else>未设置</span>
            </div>
             <div><strong>预约时间段：</strong>
                <p v-for="(item,i) in arrIndexs" v-if="item[0]" :key="i">{{item[0]}} 至 {{item[1]}},该时间段最高可预约{{item[2]}}人,该时间段非预约用户可取号{{item[3]}}个</p>
                <span v-else>未设置</span>
             </div>
             <div><strong>非预约时间段：</strong>
                <span v-if="notTimeYulan"> {{ notTimeYulan }}</span>
                <span v-else>未设置</span>
             </div>
             <p><strong>提前预约：</strong> {{orderNumberDay[0]}}天至{{orderNumberDay[1]}}天,则可预约日期为{{ canOederStart }} ~ {{ canOederEnd }}</p>
             <p><strong>用户预约：</strong> 每人每天可预约{{ value1 }}次</p>
             <p><strong>取号设置：</strong> <span v-if="radio == 'true'">当天可取当天所有号码</span><span v-else>上午只取当天上午号码，下午只取下午号码</span> </p>
            <p v-if="radio1 == 'true'"><strong> 爽约机制：</strong>采用爽约机制,爽约达到 {{breakNum}}次，{{breakDayNum}} 天内不可预约</p>
            <p v-else><strong>爽约机制：</strong>不采用爽约机制</p>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisibleMakeDate = false">确定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
</template>
<script>
import { makeIndex,getHiliday} from "../api/getData";
import { forEach } from "async";
import { json } from 'body-parser';
export default {
  name: "make",
  data: function() {
    return {
      title: "预约规则",
      orderWeekStart: "每周一",
      orderWeekEnd: "每周五",
      breakNum: 1, //爽约次数
      breakDayNum: 20,
      fullTime: false, //预约时间段不可再添加
      fullTimeDate: [], //预约时间段不可再添加
      dateMake: false,
      dateTimeMake: false,
      fetchNumberMake: false,
      breakCintract: false,
      visible2: false, //非预约时间段
      notOrderTimeList: [], //非预约时间段数据
      dialogVisibleMakeDate: false,
      dateArr: "",
      radio: "true",
      radio1: "true",
      isShows: false,
      isShowDates: false,
      isShowTimeSlot: false,
      arrIndexs: [[]],
      arrIndexEnd: [],
      value1: 1,
      orderBeforeNum: [
        {
          value: 1,
          label: "每人每天可预约次数   一次"
        },
        {
          value: 2,
          label: "每人每天可预约次数   两次"
        },
        {
          value: 3,
          label: "每人每天可预约次数   三次"
        },
        {
          value: 4,
          label: "每人每天可预约次数   四次"
        },
        {
          value: 5,
          label: "每人每天可预约次数   五次"
        }
      ],
      orderNumberDay: [0, 0],
      orderNumber: [
        { value: "0", label: "0天" },
        { value: "1", label: "1天" },
        { value: "2", label: "2天" },
        { value: "3", label: "3天" },
        { value: "4", label: "4天" },
        { value: "5", label: "5天" },
        { value: "6", label: "6天" },
        { value: "7", label: "7天" },
        { value: "8", label: "8天" },
        { value: "9", label: "9天" },
        { value: "10", label: "10天" },
        { value: "11", label: "11天" },
        { value: "12", label: "12天" },
        { value: "13", label: "13天" },
        { value: "14", label: "14天" },
        { value: "15", label: "15天" }
      ],
      orderNumberOne: [],
      orderNumberTwo: [],
      canOederStart: "",
      canOederEnd: "",
      nowMounthNum: "",
      options: [
        "每周一",
        "每周二",
        "每周三",
        "每周四",
        "每周五",
        "每周六",
        "每周日"
      ],
      optionsTwo: [],
      arrIndex: [[], [], [], [], []],
      textArr: [],
      textArrStart: 0,
      textArrEnd: 5,
      notTimeYulan:'',
      notTimeList:[]//非预约时间段保存 
    };
  },
  components: {},
  created: function() {}, // 创建时
  beforeMount: function() {}, // 挂载之前
  mounted: function() {

    //获取初始化预约日期
    var dcs = this.options.slice(this.textArrStart, this.textArrEnd);
    this.options = this.options.slice(0, this.textArrEnd);
    this.optionsTwo = [ "每周一", "每周二", "每周三", "每周四", "每周五", "每周六", "每周日" ].slice(this.textArrStart, 7);
    this.textArr = dcs;

    //获取预约天数
    this.orderNumberOne = this.orderNumberOne;
    this.orderNumberTwo = this.orderNumber;

    //获取当前日期，月份，天数
    function getMonthDays(year, month) {
      var thisDate = new Date(year, month, 0);
      return thisDate.getDate();
    }
    var nowMouth = new Date().getMonth() + 1;
    var nowYear = new Date().getFullYear();
    var nowDay = new Date().getDate();
    this.nowMounthNum = getMonthDays(nowYear, nowMouth);
    this.canOederStart = nowYear + "/" + nowMouth + "/"  + nowDay;
    this.canOederEnd = nowYear + "/" + nowMouth + "/" + nowDay;
     getHiliday({'workDateStart':this.orderWeekStart,'workDateEnd':this.orderWeekEnd}).then((data) =>{
      this.dateArr = data.data.data
    })
  }, // 挂载之后
  beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
  updated: function() {}, // 数据更新后,渲染后调用(禁止)
  beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
  destroyed: function() {}, // 实例销毁后调用
  methods: {
   
    //预览
    yuLan(){
        this.dialogVisibleMakeDate=true
        this.notTimeYulan = this.getConfirm(' ')
    },
    //非预约时间段显示
    notTimeFn(){
      this.fullTimeDate = [];
      var  isTrue = false;
       for(var i=0;i<this.arrIndexs.length;i++){
          if(this.arrIndexs[i][0] == undefined){
              this.$message({
                message: '请选择时间段',
                type: 'warning'
              });
              isTrue = false
          }else if(this.arrIndexs[i][1] == undefined){
              this.$message({
                    message: '请选择时间段',
                    type: 'warning'
                  });
                  isTrue = false
          }else if(this.arrIndexs[i][2] == undefined){
              this.$message({
                    message: '该时间段最高可预约人数未设置',
                    type: 'warning'
                  });
                  isTrue = false
          }else if(this.arrIndexs[i][3] == undefined){
              this.$message({
                    message: '该时间段非预约人用户可取号未设置',
                    type: 'warning'
                  });
                  isTrue = false
          }else{
           isTrue = true
          }
      }
      this.visible2 = isTrue;
      var itemList = [];
      this.arrIndexs.forEach((item, index) => {
        console.log(item[0] + "-" + item[1]);
        itemList.push(JSON.parse(
          JSON.stringify({
            label: item[0] + "-" + item[1],
            value: index,
            disabled: false
          }))
        );
      });
     
      this.notOrderTimeList = [];
      for (let i = 0; i < this.arrIndex.length; i++) {
        if (!Array.isArray(this.notOrderTimeList[i])) {
          this.notOrderTimeList[i] = [];
        }
        this.notOrderTimeList[i] = JSON.parse(JSON.stringify(itemList));
      }
       console.log(itemList,'已设置时间段',this.arrIndex,this.notOrderTimeList)
    },
    //获取当前开始日期
    getStartWeek(e) {
      var _listDay = [
        "每周一",
        "每周二",
        "每周三",
        "每周四",
        "每周五",
        "每周六", "每周日"
      ];
      this.textArrStart = _listDay.indexOf(e);
      this.arrIndex = [[], [], [], [], [], [], []].slice(
        this.textArrStart,
        this.textArrEnd
      );
      this.optionsTwo = _listDay.slice(this.textArrStart, 7);
      var dcs = _listDay.slice(this.textArrStart, this.textArrEnd);
      this.textArr = dcs;
      this.getEndTime()
       getHiliday({'workDateStart':this.orderWeekStart,'workDateEnd':this.orderWeekEnd}).then((data) =>{
        this.dateArr = data.data.data
      })
    },
    //获取当前结束日期
    getEndWeek(e) {
      var _listDay = [
        "每周一",
        "每周二",
        "每周三",
        "每周四",
        "每周五",
        "每周六",
        "每周日"
      ];
      this.textArrEnd = _listDay.indexOf(e) + 1;
      this.arrIndex = [[], [], [], [], [], [], []].slice(
        this.textArrStart,
        this.textArrEnd
      );
      this.options = _listDay.slice(0, this.textArrEnd);
      if (this.textArrEnd > this.textArrStart) {
        var dcs = _listDay.slice(this.textArrStart, this.textArrEnd);
        this.textArr = dcs;
      }
      this.getEndTime();
       getHiliday({'workDateStart':this.orderWeekStart,'workDateEnd':this.orderWeekEnd}).then((data) =>{
        this.dateArr = data.data.data
      })
    },

    //删除约定时间
    deleteList(i) {
      this.arrIndexs.splice(i, 1);
      this.arrIndex = [[], [], [], [], [], [], []].slice(
        this.textArrStart,
        this.textArrEnd
      );
      this.notTimeList = [];
    },
    
    //获取所选择的结束时间段
    getDateTime(e) {
    
    },
    //取消所设置的非预约时间段
    getRemove() {
     
      this.visible2 = false;
      if(this.notTimeList.length>0){
         this.arrIndex = JSON.parse(JSON.stringify(this.notTimeList));
       
       }else{
        console.log('dcs')
        this.arrIndex = [[], [], [], [], [], [], []].slice(this.textArrStart,this.textArrEnd);
        
      }
      // this.arrIndex = [[], [], [], [], [], [], []].slice(this.textArrStart,this.textArrEnd);
      
      console.log(this.notTimeList, this.arrIndex,'取消')
    },
    //确定所设置的时间段 "每周五&12:00-18:00|18:00-19:00,每周三&12:00-18:00|18:00-19:00"
    getConfirm(x) {
       var _this = this;
      this.visible2 = false;
      var listOne = "";
      var sliceDuan;
      var nums = "";
      var _options = this.options;
      sliceDuan = _options.slice(this.textArrStart, this.textArrEnd);
      
      this.arrIndex.forEach(function(item, index) {
        
         for (let y = 0; y < item.length; y++) {
            if(item[y] === ""){
               item.splice(y,1)
            }
         }
        

        if(item != ''){
            if (item.length > 0 ) {
            nums = "";
            for (let i = 0; i < item.length; i++) {
             
              if(i == 0){
                if(_this.notOrderTimeList[0][item[i]]){
                  nums += _this.notOrderTimeList[0][item[i]].label;
                }
              
              } else {
                if(_this.notOrderTimeList[0][item[i]]){
                    nums +=  "|" + _this.notOrderTimeList[0][item[i]].label;
                }
              
              }
            }
            
            listOne += sliceDuan[index] + x + nums + ",";
          }
        }
      });
      let list = JSON.parse(JSON.stringify(this.arrIndex));
      this.notTimeList =  list;
      return listOne;
    },
    //提前预约天数
    getOrderBefore(e) {
      var _orderNumber = this.orderNumber;
      var dayNum = parseInt(_orderNumber.indexOf(e));
      this.orderNumberTwo = _orderNumber.slice(parseInt(e), 16);
      var nowMonth = new Date().getMonth() + 1;
      nowMonth =
        new Date().getDate() + parseInt(e) > this.nowMounthNum
          ? nowMonth + 1
          : nowMonth;
      var nowYear =
        nowMonth + 1 > 12
          ? new Date().getFullYear() + 1
          : new Date().getFullYear();
      var nowDate;
      nowDate =
        new Date().getDate() + parseInt(e) > this.nowMounthNum
          ? new Date().getDate() + parseInt(e) - this.nowMounthNum
          : new Date().getDate() + parseInt(e);
      this.canOederStart =
        new Date().getFullYear() + "/" + nowMonth + "/" + nowDate;
    },
    getOrderBeforeTwo(e) {
      var _orderNumber = this.orderNumber;
      this.orderNumberOne = _orderNumber.slice(0, parseInt(e) + 1);
      var nowMonth = new Date().getMonth() + 1;
      nowMonth =
        new Date().getDate() + parseInt(e) > this.nowMounthNum
          ? nowMonth + 1
          : nowMonth;
      var nowYear =
        nowMonth + 1 > 12
          ? new Date().getFullYear() + 1
          : new Date().getFullYear();
      var nowDate;
      nowDate =
        new Date().getDate() + parseInt(e) > this.nowMounthNum
          ? new Date().getDate() + parseInt(e) - this.nowMounthNum
          : new Date().getDate() + parseInt(e);
      this.canOederEnd =
        new Date().getFullYear() + "/" + nowMonth + "/" + nowDate;
    },
    //获取结束的预约时间段
    getEndTime(e) {
      if (e >= "24:00") {
        this.fullTime = true;
      } else {
        this.fullTime = false;
      }
       this.arrIndex = [[], [], [], [], [], [], []].slice(
          this.textArrStart,
          this.textArrEnd
        );
    },
    //获取开始时间段
    getStartTime(e){
        this.arrIndex = [[], [], [], [], [], [], []].slice(
          this.textArrStart,
          this.textArrEnd
        );
    },

    dateTimeMakeFc() {
      this.dateTimeMake = !this.dateTimeMake;
    },
    handleChange(value) {
      console.log(value);
    },
    isShow() {
      this.isShowDates = false;
      this.isShows = !this.isShows;
    },
    isShowDate() {
      this.isShows = false;
      this.isShowDates = !this.isShowDates;
    },
    //预约时间段添加更多
    addMore() {
      if(this.arrIndexs.length>0){
        let isTrue = false;
            for(var i=0;i<this.arrIndexs.length;i++){
                if(this.arrIndexs[i][0] == undefined){
                    this.$message({
                      message: '请选择时间段',
                      type: 'warning'
                    });
                    isTrue = false
                }else if(this.arrIndexs[i][1] == undefined){
                    this.$message({
                          message: '请选择时间段',
                          type: 'warning'
                        });
                        isTrue = false
                }else if(this.arrIndexs[i][2] == undefined){
                    this.$message({
                          message: '该时间段最高可预约人数未设置',
                          type: 'warning'
                        });
                        isTrue = false
                }else if(this.arrIndexs[i][3] == undefined){
                    this.$message({
                          message: '该时间段非预约人用户可取号未设置',
                          type: 'warning'
                        });
                        isTrue = false
                }else{
                  isTrue = true
                }
            }
          if(isTrue){
              this.arrIndexs.push([""]);
               this.arrIndex = [[], [], [], [], [], [], []].slice(
                  this.textArrStart,
                  this.textArrEnd
                );
              this.notTimeList = [];
          }
         
      }
    },
    //删除指定时间段
    deleteListTime(x, i) {
      this.arrIndex[x].splice(i, 1);
       if(this.arrIndex[x].length < this.notOrderTimeList[x].length){
        this.fullTimeDate[x] = false;
      }
    },
    // 非预约时间段
    addDateSlot(i) {
      if(this.arrIndex[i].length>0){
          this.arrIndex[i].forEach((item,index) => {
            console.log(Boolean(item),this.arrIndex[i].length,this.notOrderTimeList[i].length)
              if( this.arrIndex[i].length >= this.notOrderTimeList[i].length){
                  this.fullTimeDate[i] = true;
              }else{
                this.arrIndex[i].push([""]);
                 this.fullTimeDate[i] = true;
              }

          })
      }else{
          this.arrIndex[i].push([""]);
          this.fullTimeDate[i] = true;
      }

    },
    isShowTimeSlots() {
      this.isShowTimeSlot = !this.isShowTimeSlot;
    },
    makeDateCancel() {
      this.isShowTimeSlot = false;
    },
    //非预约时间段改变
    getNotTime(e, index, f = true) {
      let _e = e;
      let temp = this.notOrderTimeList[index][e];
      console.log(temp, e, index, this.notOrderTimeList[index].disabled);
      temp.disabled = true;
      this.arrIndex[index];
      if (!f) {
        return false;
      }
      //求数组的差集
      Array.prototype.minus = function(arr) {
        var result = new Array();
        var obj = {};
        for (var i = 0; i < arr.length; i++) {
          obj[arr[i]] = 1;
        }
        for (var j = 0; j < this.length; j++) {
          if (!obj[this[j]]) {
            obj[this[j]] = 1;
            result.push(this[j]);
          }
        }
        return result;
      };
      var indexList = [];
      for (let i = 0; i < this.notOrderTimeList[index].length; i++) {
        indexList.push(i);
      }
      var minusLisr = indexList.minus(this.arrIndex[index]);

      for (let x = 0; x < minusLisr.length; x++) {
        let tepms = this.notOrderTimeList[index][minusLisr[x]];
        tepms.disabled = false;
      }
       if(this.arrIndex[index].length < this.notOrderTimeList[index].length){
           this.fullTimeDate[index] = false
      }else{
         this.fullTimeDate[index] = true
      }
    },

    //提交函数
    Submission() {
      var timeDate = this.getConfirm('&'); //非预约时间段
      var personId =JSON.parse(sessionStorage.getItem('personId'));
      var length = this.arrIndexs.length;
      var appoTimeList = [];
      for (let i = 0; i < length; i++) {
        var dcs = {
          startTime: this.arrIndexs[i][0] || 0,
          endTime: this.arrIndexs[i][1] || 0,
          number: this.arrIndexs[i][2] || 0,
          offlinenum: this.arrIndexs[i][3] || 0,
          timeSerialNum: i + 1
        };
        
        appoTimeList.push(dcs);
      }
      if (this.dateArr){
        var holidaySet = this.dateArr.join(",");
      }
      makeIndex({
        
        workDateJson: {
          workDateStart: this.orderWeekStart,
          workDateEnd: this.orderWeekEnd,
          holidaySet: holidaySet || ""
        },
        workTimeJson: {
          notAppoTime:timeDate,
          appoTimeList: appoTimeList
        },
        takeNumberJson: {
          takeNumSet: this.radio == 'true' ? true :false,
          appoNum: this.value1,
          appoDayStart: this.orderNumberDay[0],
          appoDayEnd: this.orderNumberDay[1]
        },
        breakAppoJson: { breakAppoSet:  this.radio == 'true' ? true :false, breakNum: this.breakNum, breakDay:  this.breakDayNum },
        latticeId: JSON.parse(window.sessionStorage.getItem('latticeid')),
        personId: personId
      }).then(data => {
        if(data.data.code == 0){
            this.$emit('listenTochildFirstEvent',true)
             this.$message({
              message: data.data.msg,
              type: 'success'
            });
        }
      });
    }
  } // 函数
};
</script>
<style lang='scss' scoped>
.make {
  width: 100%;
  .title {
    min-width: 960px;
    height: 60px;
    background: #fff;
    padding-left: 24px;
    h4 {
      font-size: 16px;
      color: #333437;
      line-height: 26px;
      font-weight: bold;
    }
    span {
      font-size: 14px;
      color: #000;
      line-height: 26px;
      padding-right: 150px;
    }
  }
  .main {
    margin-top: 24px;
    padding: 40px 32px 40px;
    background: #fff;
    .dateMake {
      // margin-bottom: 20px;
      // padding-bottom: 20px;
      h3 {
        height: 44px;
        line-height: 44px;
        background: #fafafa;
        font-weight: bold;
        border-bottom: 1px solid #e9e9e9;
        text-indent: 16px;
        font-size: 15px;
        margin-bottom: 20px;
        a {
          float: right;
          color: #328ef9;
          text-decoration: none;
          margin-right: 32px;
        }
      }
      span {
        display: block;
        margin-right: 150px;
        font-size: 15px;
        line-height: 30px;

        color: #999;
        strong {
          color: #333;
          font-weight: normal;
          padding-left: 16px;
        }
        a {
          padding-left: 20px;
          color: #328ef9;
          text-decoration: none;
        }
      }
      .flLeft {
        width: 13%;
        float: left;
        text-align: right;
        line-height: 32px;
      }
      .flRight {
        width: 80%;
        float: left;
        color: #888;
        line-height: 32px;
        overflow: hidden;
      }
      .checkMake {
        width: 87%;
        float: left;
        margin-left: 13%;
        font-size: 14px;
        padding-bottom: 10px;
        margin-top: 10px;
        a {
          color: #328ef9;
          text-decoration: none;
          float: left;
        }
        i {
          float: right;
          color: #bbb;
          font-style: normal;
          margin-right: 32px;
        }
      }
    }
    .dateMakeOne {
      // position: relative;
      overflow: hidden;
      // padding-bottom: 80px;
      clear: both;
      h3 {
        margin-bottom: 20px;
        a {
          color: #999;
        }
      }
      .dateMakeSnake {
        text-align: left;
        // position: relative;
        .dateOne {
          width: 350px;
          float: left;
          margin-right: 0px;
          position: relative;
          z-index: 2;
        }
        .dateTwo {
          width: 50px;
          float: left;
          position: relative;
          margin-right: 0px;
        }
        .imgSlot {
          font-size: 18px;
          float: left;
          border: none;
          margin-top: -2px;
        }
        .chooseDate {
          width: 350px;
          position: absolute;
          z-index: 3;
          left: 0px;
          opacity: 0;
        }
      }
      .primary {
        position: absolute;
        left: 50%;
        bottom: 20px;
        margin-left: -128px;
      }
      strong {
        font-weight: normal;
        width: 100px;
        display: inline-block;
        text-align: right;
      }
      .shuangyue {
        display: inline-block;
        font-size: 14px;
        padding-left: 30px;
      }
    }
    .timeSlotMake {
      overflow: hidden;
      span {
        display: inline-block;
        width: 350px;
      }
      b {
        font-weight: normal;
        padding-right: 10px;
      }
      .personRight {
        margin-left: 10px;
      }
    }
    .orderBefore {
      height: 87px;
      .imgSlot {
        border: none;
        font-size: 18px;
        position: relative;
        top: 2px;
      }
      .dialogs {
        width: 600px;
        position: absolute;
        background: #777;
        color: #fff;
        padding: 10px;
        border-radius: 6px;
        z-index: 99;
        top: 45px;
        right: -20px;
        p {
          line-height: 26px;
        }
      }
      .dialogs::before {
        content: "";
        position: absolute;
        padding: 6px;
        right: 18px;
        background: inherit;
        top: -6px;
        transform: rotate(45deg);
      }
      .tips {
        color: #999;
      }
    }
    .orderBeforeNum {
      overflow: hidden;
      .el-form {
        overflow: hidden;
      }
      .imgSlot {
        border: none;
        font-size: 18px;
        outline: none;
        position: relative;
        top: 2px;
      }
    }
    
  }
}
.el-form-item {
  float: left;
  position: relative;
  margin-bottom: 5px;
}
.preview {
  padding: 0px 40px;

  p {
    line-height: 26px;
    margin-top: 10px;
  }
  div {
    margin-top: 10px;
    p {
      margin-top: 0px;
    }
  }
  
}
.timeSlot{
          position: fixed;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          z-index: 999;
          background: rgba(0,0,0,.6);
          display: flex;
          justify-content: center;
          align-items: center;
          .timeSlotMain{
            padding: 20px 0;
            border-radius: 5px;
              width: 410px;
              overflow: hidden;
              background: #fff;
              ul{
                li{
                  margin-bottom: 0px;
                  span{
                    margin-right: 0px;
                    margin-top: 4px!important;
                  }
                }
              }
          }
      }
</style>


